<template>
	<view class="page page-box">
		<view class="box-top page-box">
			<!--  -->
			<view class="group-content page-box">
				<view class="content-three page-box">
					<view class="tabs_first flex-row">
						<!-- <view class="text-wrapper_first page-box">
							<text class="text_4">邀请列表</text>
						</view> --><text class="text_fifth" :class="{'text-wrapper_first' :index ===1}" @click="tabChange(1)">奖励记录</text>
						<text class="text_fifth" @click="tabChange(2)"
							:class="{'text-wrapper_first' :index ===2}">奖励记录</text>
					</view>
					<view class="image-text_first flex-row justify-between" v-for="item in shareList" :key="item.id">
						<image class="single-avatar_first" referrerpolicy="no-referrer" :src="item.img" />
						<view class="text-group_first page-box justify-between">
							<text class="text_sixth">{{item.name}}</text>
							<text class="text_seventh">
								注册时间&nbsp;&nbsp;&nbsp;{{item.date}}
							</text>
						</view>
					</view>


					<view class="image-wrapper_first page-box">
					</view>
				</view>
				<image class="image_second" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG023c37e4299a0e919e3c1d0394b0f676.png" />
			</view>
			<view class="group_threeth page-box">
				<image class="image_threeth" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG11d1b88f158651f7ab18745a4cf9a62a.png" />
				<view class="block_threeth page-box">
					<text class="text_fourty">邀请好友加入设辑&nbsp;AI</text>
					<text class="text_fifty">我的邀请码</text>
					<text class="text_sixty">SJ888KB</text>
					<view class="box_four flex-row justify-between">
						<button class="button_first page-box" @click="onClick_1">
							<text class="text_seventy">复制邀请码</text>
						</button>
						<button class="button_second page-box" @click="onClick_2">
							<text class="text_eighty">分享链接/海报</text>
						</button>
					</view>
				</view>
				<view class="block_four page-box"></view>
				<view class="block_fifty page-box">
					<view class="block_sixty page-box">
						<view class="group_four page-box">
							<view class="group_five page-box">
								<view class="section_four page-box">
									<div class="section_five page-box"></div>
								</view>
							</view>
						</view>
					</view>
					<text class="text_ninty">领取积分奖励</text>
				</view>
				<image class="image_four" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGf22f64df857971339b1539a4aa86be37.png" />
				<image class="image_five" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG91e12e68518a8187fad39eee25eb28b9.png" />
				<image class="image_sixty" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG03f3ae62e3da11e43d153d5457dfc7bb.png" />
				<image class="image_seventy" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG2b63d07420ef1afcf8575f8e7fa5a6b8.png" />
				<div class="block_seven page-box">
					<view class="grid_first flex-row">
						<view class="text-wrapper_second page-box justify-between" v-for="(item, index) in loopData0"
							:key="index">
							<text class="text_twenty" v-html="item.lanhutext0"></text>
							<text class="text_twentyone" v-html="item.lanhutext1"></text>
						</view>
					</view>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 1,
				loopData0: [{
						lanhutext0: '0',
						lanhutext1: '成功邀请好友数量'
					},
					{
						lanhutext0: '0',
						lanhutext1: '获得总积分奖励'
					},
					{
						lanhutext0: '0',
						lanhutext1: '成功邀请创作者数量'
					},
					{
						lanhutext0: '0',
						lanhutext1: '获得总分红（元）'
					}
				],
				shareList: [{
					id: 1,
					name: '测试1',
					date: '08-19 12:23',
					img: "https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGd9c3850e1e2a669b1c74d438b99a8753.png"
				}, {
					id: 2,
					name: '测试1',
					date: '08-19 12:23',
					img: "https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGd9c3850e1e2a669b1c74d438b99a8753.png"
				}, {
					id: 3,
					name: '测试1',
					date: '08-19 12:23',
					img: "https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGd9c3850e1e2a669b1c74d438b99a8753.png"
				}, {
					id: 4,
					name: '测试1',
					date: '08-19 12:23',
					img: "https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGd9c3850e1e2a669b1c74d438b99a8753.png"
				}, {
					id: 4,
					name: '测试1',
					date: '08-19 12:23',
					img: "https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGd9c3850e1e2a669b1c74d438b99a8753.png"
				}, {
					id: 4,
					name: '测试1',
					date: '08-19 12:23',
					img: "https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGd9c3850e1e2a669b1c74d438b99a8753.png"
				}, {
					id: 4,
					name: '测试1',
					date: '08-19 12:23',
					img: "https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGd9c3850e1e2a669b1c74d438b99a8753.png"
				}, {
					id: 4,
					name: '测试1',
					date: '08-19 12:23',
					img: "https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGd9c3850e1e2a669b1c74d438b99a8753.png"
				}, ]
			}
		},
		methods: {
			tabChange(index) {
				this.index = index
			}
		}
	}
</script>

<style>
	body  {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	body {
		font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
	}

	button {
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		outline: none;
		background-color: transparent;
	}

	button:active {
		opacity: 0.6;
	}

	.page-box {
		display: flex;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.align-start {
		display: flex;
		align-items: flex-start;
	}

	.align-center {
		display: flex;
		align-items: center;
	}

	.align-end {
		display: flex;
		align-items: flex-end;
	}

	.page {
		position: relative;
		/* width: 750rpx; */
		width: 100%;
		height: 2212.15rpx;
		overflow: hidden;
	}

	.box-top {
		position: relative;
		/* width: 739.68rpx; */
		width: 100%;
		height: 2212.15rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG2c8e352782ec91730ed8919f7f5c3d04.png) 100% no-repeat;
		background-size: 100% 100%;
		margin-left: 4.32rpx;
	}
	.group-content {
		background-color: rgba(0, 0, 0, 1);
		height: 100%;
		/* width: 689.8rpx; */
		/* width: 101%; */
		width: 93.2%;
		position: relative;
		margin: 1100.91rpx 0 32.68rpx 25.8rpx;
	}

	.content-three {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 14px;
		position: relative;
		width: 88.27%;
		height: 690rpx;
		border: 3px gradient;
		overflow: hidden;
		margin: 165.13rpx 0 0 5.73%;
	}

	.tabs_first {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 100px;
		width: 91.24%;
		height: 72.24770642201835rpx;
		border: 1px solid rgba(196, 191, 191, 1);
		margin: 37.84rpx 0 0 4.51%;
	}

	.text-wrapper_first {
		background-color: rgba(0, 0, 0, 1);
		border-radius: 100px;
		color: white !important;
		height: 53.32rpx !important;
		width: 43% !important;
		margin: 8.6rpx 0 0 10.32rpx !important;
	}


	.text_fifth {
		width: 21.05%;
		height: 27.52rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 27.52rpx;
		font-family: Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: center;
		white-space: nowrap;
		line-height: 39.56rpx;
		margin: 22.36rpx 14.85% 0 17.02%;
	}

	.image-text_first {
		width: 399.08rpx;
		height: 56.76rpx;
		margin: 34.40rpx 0 0 48.16rpx;
	}

	.single-avatar_first {
		width: 56.76rpx;
		height: 56.76rpx;
	}

	.text-group_first {
		width: 326.83rpx;
		height: 53.32rpx;
		margin-top: 1.72rpx;
	}

	.text_sixth {
		width: 204.70rpx;
		height: 22.36rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 20.64rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34.40rpx;
	}

	.text_seventh {
		width: 326.83rpx;
		height: 20.64rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 17.20rpx;
		font-family: OPPOSans-Regular;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 34.40rpx;
		margin-top: 10.32rpx;
	}


	.text-group-content {
		width: 326.83rpx;
		height: 53.32rpx;
		margin-top: 1.72rpx;
	}







	.text-group_threeth {
		width: 326.83rpx;
		height: 53.32rpx;
		margin-top: 1.72rpx;
	}





	.image-wrapper_first {
		height: 318.23rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG580f19738fa55f37a4b20cb94207d258.png) 100% no-repeat;
		background-size: 100% 100%;
		width: 318.23rpx;
		position: absolute;
		left: -75.68rpx;
		top: 404.24rpx;
	}


	.image_second {
		position: absolute;
		left: 534.97rpx;
		top: 362.95rpx;
		width: 165.13rpx;
		height: 165.13rpx;
	}

	.group_threeth {
		background-image: linear-gradient(180deg,
				rgba(0, 0, 0, 0.16) 0,
				rgba(0, 0, 0, 1) 50.714284%);
		position: absolute;
		left: 25.80rpx;
		/* top: 189.22018348623854rpx; */
		/* width: 689.79rpx; */
		width: 93.2%;
		height: 1111.23rpx;
		background: url(@/static/shareBg.jpg)
	}

	.image_threeth {
		width: 27%;
		height: 142.77rpx;
				margin: 149.65rpx 0 0 37.15%;
				    box-shadow: 0px 0px 20px 2px;
		
	}
	.group_threeth::after {
	  content: "";
	  position: absolute;
	  top: 50%; /* 将叠加层放置在容器的中间位置 */
	  left: 0;
	  width: 100%;
	  height: 50%; /* 只覆盖图片的下半部分 */
	  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); /* 渐变黑色 */
	}

	.block_threeth {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 14px;
		/* width: 608.94rpx; */
		width: 88%;
		height: 514.33rpx;
		border: 3px gradient;
		margin: 122.13rpx 0 182.33rpx 5.73%;
		z-index: 100;
	}

	.text_fourty {
		width: 72.59%;
		height: 44.72rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 30.96rpx;
		font-family: Source Han Sans CN-Light;
		font-weight: 300;
		text-align: center;
		white-space: nowrap;
		line-height: 34.40rpx;
		margin: 73.96rpx 0 0 13.84%;
	}

	.text_fifty {
		width: 75.14%;
		height: 37.84rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 30.96rpx;
		font-family: Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: center;
		white-space: nowrap;
		line-height: 34.40rpx;
		margin: 34.40rpx 0 0 12.99%;
	}

	.text_sixty {
		width: 75.14%;
		height: 37.84rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 61.92rpx;
		font-family: Source Han Sans CN-Heavy;
		font-weight: 900;
		text-align: center;
		white-space: nowrap;
		line-height: 34.403rpx;
		margin: 48.1rpx 0 0 12.42%;
	}

	.box_four {
		width: 83.6%;
		height: 70.52rpx;
		margin: 89.44rpx 0 77.44rpx 8.19%;
	}

	.button_first {
		background-color: rgba(255, 119, 68, 1);
		border-radius: 100px;
		height: 70.52rpx;
		width: 235.6rpx;
	}

	.text_seventy {
		width: 134.1rpx;
		height: 39.56rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 24.08rpx;
		font-family: Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: center;
		white-space: nowrap;
		line-height: 34.403669rpx;
		margin: 13.761467rpx 0 0 51.60550rpx;
	}

	.button_second {
		background-color: rgba(255, 119, 68, 1);
		border-radius: 100px;
		height: 70.52752rpx;
		width: 235.6651rpx;
	}

	.text_eighty {
		width: 156.53669rpx;
		height: 39.56422rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 24.08256rpx;
		font-family: Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: center;
		white-space: nowrap;
		line-height: 34.403669rpx;
		margin: 13.761467rpx 0 0 41.28440rpx;
	}

	.block_four {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 14px;
		position: absolute;
		left: 5.73%;
		top: 975.3rpx;
		width: 88.27%;
		height: 239.10rpx;
		border: 3px gradient;
		z-index: 100;
	}

	.block_fifty {
		z-index: 100;
		background-color: rgba(255, 170, 0, 1);
		border-radius: 9px;
		position: absolute;
		left: 19.9%;
		top: 376.7rpx;
		width: 59.8%;
		height: 87.72rpx;
	}

	.block_sixty {
		display: none;
		box-shadow: 0px 9px 36px 0px rgba(245, 143, 35, 1);
		background-image: linear-gradient(180deg,
				rgba(255, 212, 0, 1) 0,
				rgba(255, 195, 0, 1) 100%);
		border-radius: 50%;
		height: 147.93rpx;
		width: 147.9rpx;
		position: absolute;
		left: -51.6rpx;
		top: -58.4rpx;
	}

	.group_four {
		box-shadow: 0px 9px 36px 0px rgba(245, 143, 35, 1);
		background-color: rgba(216, 216, 216, 1);
		border-radius: 50%;
		height: 147.9rpx;
		width: 100%;
	}

	.group_five {
		box-shadow: inset 0px 1px 21px 0px rgba(255, 117, 0, 1);
		background-image: linear-gradient(144deg,
				rgba(255, 223, 0, 1) 0,
				rgba(255, 176, 0, 1) 100%);
		border-radius: 50%;
		height: 111.8rpx;
		border: 6px solid rgba(255, 220, 0, 1);
		width: 111.8rpx;
		margin: 17.20rpx 0 0 18.92rpx;
	}

	.section_four {
		box-shadow: inset 0px 1px 21px 0px rgba(255, 117, 0, 1);
		background-color: rgba(216, 216, 216, 1);
		border-radius: 50%;
		height: 111.81rpx;
		border: 6px solid rgba(255, 220, 0, 1);
		width: 111.81rpx;
	}

	.section_five {
		width: 68.80rpx;
		height: 65.36rpx;
		margin: 24.08256880733945rpx 0 0 20.64rpx;
	}

	.text_ninty {
		position: absolute;
		left: 10%;
		top: 25.80rpx;
		width: 85%;
		height: 37.84rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 34.40rpx;
		font-family: Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: center;
		white-space: nowrap;
		line-height: 34.40rpx;
	}

	.image_four {
		position: absolute;
		left: -8.60rpx;
		top: 750rpx;
		width: 228.78rpx;
		height: 228.78rpx;
	}

	.image_five {
		position: absolute;
		left: 576.26rpx;
		top: 961.585rpx;
		width: 116.97rpx;
		height: 116.97rpx;
	}

	.image_sixty {
		position: absolute;
		left: 538.41rpx;
		top: 505.73rpx;
		width: 161.69rpx;
		height: 161.69rpx;
	}

	.image_seventy {
		position: absolute;
		left: 264.90rpx;
		top: 1126.725rpx;
		width: 127.29rpx;
		height: 127.29rpx;
	}

	.block_seven {
		height: 184.05rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG61432496883c68a4c39f24ebdc11e6d6.png) 100% no-repeat;
		background-size: 100% 100%;
		width: 90.39%;
		position: absolute;
		left: 11.29%;
		top: 1001.14rpx;
	}

	.grid_first {
		width: 99.37%;
		height: 178.89rpx;
		flex-wrap: wrap;
		margin: 5.16rpx 0 0 1%;
		z-index: 999;
	}

	.text-wrapper_second {
		width: 40.54%;
		height: 77.40rpx;
		margin: 0 8.91% 25.80rpx 0;
	}

	.text-wrapper_second:nth-child(2n) {
		margin-right: 0;
	}

	.text-wrapper_second:nth-last-child(-n + 2) {
		margin-bottom: 0;
	}

	.text_twenty {
		width: 254.58rpx;
		height: 34.40rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 24.08rpx;
		font-family: OPPOSans-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 34.40rpx;
	}

	.text_twentyone {
		width: 254.58rpx;
		height: 37.84rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 20.64rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: NaN;
		text-align: center;
		white-space: nowrap;
		line-height: 34.40rpx;
		margin-top: 5.16rpx;
	}
</style>